<template>
	<page class="" ref='page'top='100rpx'>
		<!-- lh jzc  此页面需要调整wwl-->
		<!-- <view class="tabber_box">
			<view class="tabber_box_static" :style="{ height: `${getters.statusBarHeight}px` }"></view>
			<view class="tabber_box_flex" :style="{ height: `${getters.statusBarHeight}px` }"></view>
		</view>
		<view class="tabber_box_title_static">
		</view>
		<view class="tabber_box_title_flex" :style="{ top: `${getters.statusBarHeight}px` }">
			<view class="left" @click="citySelete">
				<view class="city">
					{{getters.addressSelect ? getters.addressSelect.name : '请选择'}}
				</view>
				<image src="../static/img/orientation.png" mode="" class="img"></image>
			</view>
			<view class="text">
				设计师
			</view>
		</view> -->
		<view class="search">
			<view class="search_box">
				<input type="text"  maxlength="20" v-model='title' confirm-typ="search" @confirm="onSearch()" class="select_text2" :focus="isFocus" @focus='isFocus = true' @blur='isFocus = false'/>
				<view class="select_text1" v-if='!title && !isFocus' @click="isFocus = true">
					<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/moIgND2cnkrxJ7nCJvljsDhjGXdLT9Pj77rnPBP9.png" mode="scaleToFill" ></image>
					<text>搜索</text>
				</view>
			</view>
		</view>
		<!-- 分类 -->
		<view class="tab_row" v-if='vgtTab && vgtTab.length > 0'>
			<!-- <vgt-tab :list="vgtTab" @onValueChange="vgtChange" color='#626262' bgc='#F2F2F2'></vgt-tab> -->
		</view>
		<!--  wwl start -->
		<view class="list_box">
			<block v-if='list && list.length > 0'>
				<renovationShop v-for='(row,index) in list' :key='index' :row='row' type='findDesign' :source='source' :offer='offer' :duihuan='0' />
				<loadingText :type='loading || page * size < total' />
			</block>
			<view style='padding-top:200rpx' v-else-if='list.length ==  0 && !loading'>
				<empty :status='2' />
			</view>
		</view>
		<!--  wwl  end-->
		<!-- <tabbar ref='tabbar' active='1' /> -->
	</page>
</template>
<script>
	import {
		getDesignNav,
		getFindDesignshopList
	} from '@/utils/getRequest.js'
	import vgtTab from '@/components/vgt-tab/vgt-tab.vue'
	import renovationShop from "@/components/renovation-shop.vue"
	import tabbar from '@/components/tabbar.vue'
	export default {
		components: {
			tabbar,
			vgtTab,
			renovationShop
		},
		props: {
			isTouchBottom: {
				type: [String, Number],
				default: 0
			},
		},
		data() {
			return {
				isFocus:false,
				title: '',
				source:0,
				activeId: 0,
				vgtTab: [],
				loading: false,
				list: [],
				total: 0,
				page: 1,
				size: 10,
				total: 0,
				cityId:'',
				offer:''
			}
		},
		onLoad(params) {
			if(params.offer)this.offer = params.offer
			if(params.source) this.source = params.source
			if(params.id && params.id != 0) {
				// this.activeId = params.id;
				// this.page = 1
				this.vgtChange({currentInd:params.id})
			}
			this.getTabList()
			this.cityId = this.getters.addressSelect ? this.getters.addressSelect.id : ''
		},
		onShow(){
			if( this.getters.addressSelect && this.cityId !=  this.getters.addressSelect.id){
				this.cityId =  this.getters.addressSelect.id
				this.page = 1
				this.getList()
			}else{
				var option = this.$global.$editUploadBack(4, 'findDesignLike')
				if(option && option.id && this.list.findIndex(x=>x.id == option.id) != -1){
				var index = this.list.findIndex(x=>x.id == option.id)
					if(index != -1){
						this.list[index].is_like = this.list[index].like > option.like ? 2 : 1
						this.list[index].like = option.like
					}
				}
			}
			
		},
		onReachBottom(x) {
			if (this.page * this.size >= this.total || this.loading) return
			this.page++
			this.getList()
		},
		watch: {
			currentAddress(x) {
				if (this.$store.state.currentArea && !this.$store.state.addressSelect) {
					this.$store.commit('setAddressSelect', {
						id: this.$store.state.currentArea.cityId,
						name: this.$store.state.currentArea.cityName
					})
				}
				this.page = 1
				this.getList()
			}
		},
		computed: {
			currentAddress() {
				return this.$store.state.currentArea
			}
		},
		onPullDownRefresh(){
			this.page = 1 
			this.getTabList()
		},
		methods: {
			async getTabList() {
				try {
					var res = await getDesignNav()
					this.vgtTab = [{
						name: '全部',
						id: 0
					}, ...res]
					this.getList()
				} catch {}
			},
			citySelete() {
				uni.navigateTo({
					url: '/pagesHome/city'
				});
			},
			onSearch(){
				this.page = 1
				this.getList()
			},
			vgtChange(e) {
				console.log(e,'设计分类')
				this.activeId = e.currentInd;
				this.page = 1
				this.getList()
			},
			async getList() {
				this.loading = true
				if(this.page == 1) uni.showLoading()
				try {
					var res = await getFindDesignshopList({
						page: this.page,
						limit: this.size,
						build_city_id: this.$store.state.addressSelect ? this.$store.state.addressSelect.id :
							null,
						build_city_nav_id: this.activeId,
						zone_id:this.getters.addressSelect ? this.getters.addressSelect.id : '',
						title: this.title ? this.title.trim() :  '',
						user_id: this.offer == 2  && this.$store.state.chat_to ? this.$store.state.chat_to.id : ''
					})
					this.list = this.page == 1 ? res.list : [...this.list, ...res.list],
					this.total = res.count
					this.loading = false
					
					// if(res.shopcount < 1){
					// 	uni.showToast({title:'您的档案地址服务商家不足1个，已为您展示其他服务商家',icon:'none',duration:2000})
					// }
					
					if(this.page == 1) uni.hideLoading()
					uni.stopPullDownRefresh()
					
				} catch {
					this.loading = false
					uni.hideLoading()
					uni.stopPullDownRefresh()
				}
			}
		},
		mounted() {}
	}
</script>

<style lang="scss" scoped>
	.tabber_box .tabber_box_static {
		width: 100%;
		background: #f2f2f2;
	}

	.tabber_box .tabber_box_flex {
		width: 100%;
		background: #f2f2f2;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.tabber_box_title_static {
		height: 80rpx;
		width: 100%;
		background: #f2f2f2;
	}

	.tabber_box_title_flex {
		background: #f2f2f2;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999999;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 42rpx;
		font-family: PingFang SC, PingFang SC-Semibold;
		font-weight: 700;
		text-align: center;
		color: #000000;
		.left {
			position: absolute;
			left: 58rpx;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			align-items: center;

			.city {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #26252b;
				max-width: 200rpx;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 8rpx;
			}
		}

		text {
			width: 144rpx;
			height: 66rpx;
			font-size: 48rpx;
			font-family: PingFang SC, PingFang SC-Semibold;
			font-weight: 600;
			text-align: left;
			color: #26252b;
		}
	}

	.search {
		width: 100%;
		height: 120rpx;
		background: #f2f2f2;
		position: fixed;
		z-index: 9999;
		padding-top: 40rpx;
		padding: 40rpx 36rpx 0;
		box-sizing: border-box;
		
		.search_box{
			position: relative;
		}
		.select_text2{
			width: 100%;
			height: 64rpx;
			background: #ffffff;
			border-radius: 32rpx;
			font-size: 28rpx;
			line-height: 64rpx;
			color:#333;
			text-align: center;
			// padding: 0 26rpx ;
			box-sizing: border-box;
		}
		.select_text1{
			font-size: 28rpx;
			color:#ADADAD;
			position: absolute;
			left: 50%;
			top:50%;
			transform: translate(-50%,-50%);
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			
		}
		
	}

	.tab_row {
		padding: 10rpx 36rpx 0;
		margin-top: 100rpx;
		background: #f2f2f2;
	}

	.good_list {
		background: #fff; //设置背景 否则会透明
	}

	.homeBox {
		// 对此盒子进行 sticky 粘性定位
		// position: sticky;
		position: fixed;
		z-index: 9;
		background: #fff; //设置背景 否则会透明
		/* #ifdef H5 */
		//粘性定位 在h5下 加 原生头部高度 44px
		top: 44rpx;
		width: 205rpx;
		margin-top: 100rpx;

		/* #endif */
		.tabBox {
			width: 100%;
			margin-left: 18rpx;
			white-space: nowrap;

			// display: none;
			/* #ifdef MP-TOUTIAO */
			/* #endif */
			.tab-item {
				padding: 8rpx 36rpx;
				position: relative;
				display: inline-block;
				text-align: center;
				transition-property: background-color, width;
				background: #f6f7fb;
				border-radius: 30rpx;
			}
		}
	}

	.imgs {
		width: 22rpx;
		height: 22rpx;
		position: fixed;
		z-index: 99;
		top: 60rpx;
		left: 300rpx;
		padding: 0rpx 36rpx;
	}

	.homeBox {
		width: 630rpx;
		z-index: 99;
		margin-left: 10rpx;
		margin-top: 100rpx;
		background: #f2f2f2;
		padding: 30rpx 0rpx;
	}

	// wwl start
	.list_box {
		margin: 30rpx 36rpx 30rpx;
		min-height: 60vh;
	}

	// wwl end
</style>
